<template>
  <NvCrud :option :data :pagination :loading />
</template>

<script setup lang="ts">
import type { PaginationProps } from 'naive-ui'
import type { NvCrudOption } from 'nv-crud'
import { NvCrud } from 'nv-crud'
import { reactive, ref } from 'vue'

const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 3,
  itemCount: 100,
  onUpdatePage: (page) => {
    pagination.page = page
    loadData()
  },
})

const loading = ref(false)
const data = ref<{ name: string, sex: string, age: number }[]>([])
function loadData() {
  loading.value = true
  setTimeout(() => {
    data.value = Array.from({ length: pagination.pageSize! }).map((_, i) => ({
      name: `name${(pagination.page! - 1) * pagination.pageSize! + i + 1}`,
      sex: i % 2 === 0 ? '男' : '女',
      age: (pagination.page! - 1) * pagination.pageSize! + i + 1,
    }))
    loading.value = false
  }, 1000)
}
loadData()

const option: NvCrudOption = {
  layout: 'simple',
  rowActions: false,
  actionbar: false,
  remote: true,
  fields: {
    name: { title: '姓名' },
    sex: { title: '性别' },
    age: { title: '年龄' },
  },
}
</script>
